<template>
  <div>
  <div>
    <el-card style="margin-left: 20px;margin-top: 15px;width: 90%">
      <el-descriptions class="margin-top" title="个人信息" :column="4" direction="vertical">
        <el-descriptions-item label="用户名">{{ username }}</el-descriptions-item>
        <el-descriptions-item label="手机号">{{ phone }}</el-descriptions-item>
        <el-descriptions-item label="邮箱" :span="2">{{ email }}</el-descriptions-item>
        <el-descriptions-item label="备注">
          <el-tag size="small"> 用户 </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="联系地址">{{ address }}</el-descriptions-item>
        <el-descriptions-item label="用户类型">
          <el-tag size="middle">{{ usertype === "0" ? "管理员" : "普通用户" }}</el-tag>
        </el-descriptions-item>
      </el-descriptions>
      <el-button type="primary" @click="openChangePwdDialog">修改信息</el-button>
    </el-card>
    <el-card style="margin-left: 20px;margin-top: 15px;width: 90%">
      <el-descriptions class="margin-top" title="系统状态信息" :column="3" direction="vertical" >
        <el-descriptions-item label="当前系统状态">
          <el-tag size="small"> {{ httpcode === '200'? "状态正常": "状态异常" }} </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="系统时区">
          <el-tag size="small"> {{ timezonelocal }} </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="系统时间">
          {{ nowTime }}
        </el-descriptions-item>
        <el-descriptions-item label="服务器IP">{{ systemInfo.ipAddress }}</el-descriptions-item>
        <el-descriptions-item label="主机名称">{{ systemInfo.hostName }}</el-descriptions-item>
        <el-descriptions-item label="CPU核心数" >{{ systemInfo.availableProcessors+' 核心' }}</el-descriptions-item>
        <el-descriptions-item label="总内存大小">
          <el-tag size="small"> {{ systemInfo.totalPhysicalMemorySize }} </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="CPU使用率" style="margin-top: 30px">
           {{ systemInfo.systemCpuLoad }}
        </el-descriptions-item>
        <el-descriptions-item label="操作系统名称">{{ systemInfo.osName }}</el-descriptions-item>
        <el-descriptions-item label="操作系统版本" >
          <el-tag size="small">{{ systemInfo.osVersion }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="数据库产品名称" >
          {{ systemInfo.databaseProductInfo }}
        </el-descriptions-item>
        <el-descriptions-item label="数据库版本" >
          {{ systemInfo.databaseVersion }}
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
  </div>
  <div>
    <el-dialog
        style="text-align: left"
        title="修改密码"
        :visible.sync="ChangePwdDialog"
        width="30%">
      <el-form :model="form" label-width="80px">
        <el-form-item label="输入新密码">
          <el-input v-model="form.password" style="width: 90%"/>
        </el-form-item>
        <el-form-item label="验证真实姓名">
          <el-input v-model="form.actualname" style="width: 90%"/>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="ChangePwdDialog = false">取 消</el-button>
          <el-button type="primary" @click="submitChangePassword">确 定</el-button>
        </span>
    </el-dialog>
  </div>
  </div>
</template>
<script>
import request from "@/utils/request";

export default {
  data(){
    return{
      httpcode:'',
      username:'',
      usertype:'',
      phone:'',
      address:'',
      email:'',
      image:this.image,
      password:this.password,
      ChangePwdDialog:false,
      systemInfo:{
        availableProcessors:'',
        hostName:'',
        ipAddress:'',
        osName:'',
        osVersion:'',
        systemCpuLoad:'',
        totalPhysicalMemorySize:'',
        databaseProductInfo:'',
        databaseVersion:''
      },
      form:{
        password:'',
        actualname:'',
        name:''
      },
      nowTime: "",  //现在时间
      timezonelocal:'' //服务器时区
    }
  },
  created() {
    this.loadPerson(),
    this.loadDatabaseInfo()
    this.getTimezone()
  },
  methods:{
    loadPerson(){
      this.username=JSON.parse(localStorage.getItem('name')).name
      this.address=JSON.parse(localStorage.getItem('name')).address
      this.phone=JSON.parse(localStorage.getItem('name')).phone
      this.email=JSON.parse(localStorage.getItem('name')).email
      this.usertype=JSON.parse(localStorage.getItem('name')).userType
    },
    openChangePwdDialog(){
      this.ChangePwdDialog = true
      console.log("111")
    },
    submitChangePassword(){
      this.form.name=JSON.parse(localStorage.getItem('name')).name
      request.put('users/changePwd',this.form).then(res=>{
        if(res.code === '200'){
          this.$message({
            type:"success",
            message:"修改成功"
          })
          this.ChangePwdDialog = false
          // window.location.reload(true)
        } else {
          this.$message({
            type:"warning",
            message:res.msg
          })
          this.ChangePwdDialog = false
        }
      })
    },
    loadSystemInfo(){
      request.get('system/info').then(res=>{
        if(res.code === '200'){
          this.systemInfo.availableProcessors=res.data.availableProcessors,
          this.systemInfo.hostName=res.data.hostName,
          this.systemInfo.ipAddress=res.data.ipAddress,
          this.systemInfo.osName=res.data.osName,
          this.systemInfo.osVersion=res.data.osVersion,
          this.systemInfo.systemCpuLoad=res.data.systemCpuLoad,
          this.systemInfo.totalPhysicalMemorySize=res.data.totalPhysicalMemorySize
          this.httpcode=res.code
        }
      })
    },
    loadDatabaseInfo(){
      request.get('system/dbinfo').then(res=>{
        if(res.code === '200'){
          this.systemInfo.databaseProductInfo=res.data.databaseProductInfo,
          this.systemInfo.databaseVersion=res.data.databaseVersion
        }
      })
    },
    startPolling() {
      this.intervalId = setInterval(() => {
        this.loadSystemInfo();
      }, 1500);
    },
    stopPolling() {
      clearInterval(this.intervalId);
    },
    getNowDatetime() {
      var date = new Date();
      var sign2 = ":";
      var year = date.getFullYear() // 年
      var month = date.getMonth() + 1; // 月
      var day = date.getDate(); // 日
      var hour = date.getHours(); // 时
      var minutes = date.getMinutes(); // 分
      var seconds = date.getSeconds() //秒
      var weekArr = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天'];
      var week = weekArr[date.getDay()];
      // 给一位数的数据前面加 “0”
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (day >= 0 && day <= 9) {
        day = "0" + day;
      }
      if (hour >= 0 && hour <= 9) {
        hour = "0" + hour;
      }
      if (minutes >= 0 && minutes <= 9) {
        minutes = "0" + minutes;
      }
      if (seconds >= 0 && seconds <= 9) {
        seconds = "0" + seconds;
      }
      this.nowTime =  year + "-" + month + "-" + day + " " + hour + sign2 + minutes + sign2 + seconds;
    },
    getTimezone(){
      let offsetInMinutes = new Date().getTimezoneOffset();
      // 转换为小时数（如果是负数，则代表位于UTC东方）
      let offsetInHours = Math.floor(offsetInMinutes / 60);
      if(offsetInHours<0){
        this.timezonelocal= "UTC+"+ Math.abs(offsetInHours);
      }else {
        this.timezonelocal= "UTC-"+ offsetInHours;
      }
    }
  },
  mounted() {
    this.startPolling(); // 页面加载完成后开始轮询
    setInterval(this.getNowDatetime, 1000);
  },
  beforeDestroy() {
    this.stopPolling(); // 组件销毁前停止轮询，防止内存泄漏
  }
}
</script>
<style>

</style>